<template>
  <uni-nav-bar title="发放奖励" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" v-if="friendAll">
    <view class="space-between">
      <view>头像</view>
      <image :src="friendAll.avatar" mode=""></image>
    </view>
    <view class="space-between top">
      <view>微信昵称</view>
      <view>{{friendAll.nickname}}</view>
    </view>
    <view class="space-between top">
      <view>手机号</view>
      <view @click="telCall(friendAll.mobile)">{{friendAll.mobile}}</view>
    </view>
    <view class="space-between top">
      <view>邀请人</view>
      <view v-if="friendAll.zhitui_name">{{friendAll.zhitui_name}}({{friendAll.zhitui_id}})</view>
    </view>
    <view class="space-between top">
      <view>注册时间</view>
      <view>{{friendAll.createtime}}</view>
    </view>
  </view>
  <view class="package" v-for="item in RewardList" :key="item.id" @click="()=>active=item.id"
    :style="{border:active===item.id?'1px solid #006BFD':''}">
    <view>发放奖励:{{item.money}}元（{{item.money_type}}）</view>
    <view class="top">奖励类型:{{item.name}}</view>
    <view class="top">每人可领取次数:{{item.max}}次</view>
  </view>
  <view class="but" @click="submit()">立即发放</view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { telCall } from '@/utils/copyText';
  import { toPublish } from '@mqtt';
  import { getDriverInfo, getRewardList } from '@/gql/administrator';
  import { errorToast, showLoading, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  const admin_id = getDriverID();
  const friendID = ref()
  const friendAll = ref()
  const RewardList = ref([])
  const active = ref()
  onLoad((pearm) => {
    friendID.value = pearm.id
    init()
  })
  /**
   * 获取车友详情
   */
  function init() {
    showLoading()
    const payload = {
      query: getDriverInfo,
      variables: {
        driver_id: Number(friendID.value)
      },
    };
    toPublish(
      'ql/control/getDriverInfo',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getDriverInfo } = obj.data;
        friendAll.value = getDriverInfo
      }
    );
  }
  lists()
  function lists() {
    showLoading()
    const payload = {
      query: getRewardList
    };
    toPublish(
      'ql/control/getRewardList',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { getRewardList } = obj.data;
        RewardList.value = getRewardList
      }
    );
  }
  function submit() {
    if (!active.value) {
      errorToast('请选择要发放的奖励')
      return
    }
    showLoading()
    const payload = {
      id: active.value,
      driver_id: Number(friendID.value),
      admin_id
    };
    toPublish(
      'control/sendReward',
      payload,
      (obj : any) => {
        uni.hideLoading();
        const { code, msg } = obj;
        active.value = ''
        if (code === 1) {
          successToast(msg)
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .space-between {
    image {
      width: 62rpx;
      height: 62rpx;
      background: #DADADA;
      border-radius: 5px;
    }
  }

  .top {
    margin-top: 15rpx;
  }

  .but {
    width: 460rpx;
    height: 98rpx;
    background: #3F90FF;
    border-radius: 5px;
    text-align: center;
    line-height: 98rpx;
    margin: 40rpx auto;
    color: #fff;
  }
</style>